<template>
  <div id="login">
    <transition enter-active-class="animated bounceInDown">
      <div class="loginBox" v-show="loginEnter">
        <p class="denglu">登录</p>
        <div>
          <el-form
            status-icon
            size="medium"
            label-position="top"
            ref="form"
            :model="form"
            label-width="70px"
            :rules="rules"
          >
            <el-form-item label="用户名" prop="username">
              <el-input v-model="form.username"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input v-model="form.password" show-password></el-input>
            </el-form-item>
            <div style="position:relative">
              <el-form-item label="验证码" prop="code" class="verCode">
                <el-input v-model="form.code"></el-input>
              </el-form-item>
              <el-button
                type="primary"
                size="medium"
                class="verButton"
                @click="getVerCode"
                :disabled="verButtonFlag"
                >{{
                  !verButtonFlag
                    ? "获取验证码"
                    : "倒计时" + verButtonTime + "秒"
                }}</el-button
              >
            </div>
          </el-form>
          <el-button type="primary" class="button" @click="goin" size="medium"
            >提交</el-button
          >
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import sha1 from "js-sha1";
import { mapMutations } from "vuex";
import { limitRoute,routes } from "../../router/index";
export default {
  name: "login",
  data() {
    return {
      form: {
        username: null,
        password: null,
        code: null
      },
      verButtonTime: 60,
      verButtonFlag: false,
      rules: {
        username: [
          { required: true, trigger: "blur", message: "请输入用户名" }
        ],
        password: [{ required: true, trigger: "blur", message: "请输入密码" }],
        code: [{ required: true, trigger: "blur", message: "请输入验证码" }]
      },
      loginEnter: false
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.loginEnter = true;
    });
  },
  methods: {
    ...mapMutations({
      SET_TOKEN: "SET_TOKEN"
    }),
    goin() {
      let that = this;
      this.$refs.form.validate(async valid => {
        if (valid) {
          this.SET_TOKEN("1111111111");
          //获取用户权限
          let data = await that.axios.post("/mockApi/getUserMenu", {
            name: "info"
          });
          console.log(data);
          let allRoute = [];
          allRoute = routes.concat(
            limitRoute.filter(item => {
              return data.includes(item.meta.userCode);
            })
          );
          this.$router.options.routes = allRoute;
          this.$router.addRoutes(allRoute);
          this.$router.push("/layout");
          //登录
          // let { data } = await this.axios.post("/login/", {
          //   ...this.form,
          //   password: sha1(this.form.password)
          // });
          // if (data.resCode === 0) {
          //   //存储token
          //   this.SET_TOKEN(data.data.token);
          //   this.$router.push("/layout");
          // } else {
          //   this.$message.error(data.message);
          // }
        }
      });
    },
    getVerCode() {
      //获取验证码
      this.$refs.form.validateField("username", async errorMsg => {
        if (!errorMsg) {
          this.verButtonFlag = true;
          this.verTime();
          let { data } = await this.axios.post("/getSms/", {
            username: this.form.username,
            module: "login"
          });
          if (data.resCode === 0) {
            this.$message.success(data.message);
          } else {
            this.verButtonFlag = false;
          }
        }
      });
    },
    //验证码倒计时
    verTime() {
      let countdown = setInterval(() => {
        if (this.verButtonTime <= 0) {
          clearInterval(countdown);
          this.verButtonTime = 60;
          this.verButtonFlag = false;
        } else {
          this.verButtonTime -= 1;
        }
      }, 1000);
    }
  }
};
</script>

<style lang="scss" scoped>
#login {
  width: 100%;
  height: 100vh;
  background: url("~@/assets/images/loginBg.jpg") no-repeat center;
  background-size: cover;
  /deep/.el-form-item__label {
    color: #fff;
  }
}
.loginBox {
  width: 320px;
  height: 400px;
  position: absolute;
  top: calc(50% - 200px);
  left: calc(50% - 160px);
  .denglu {
    font-size: 30px;
    color: #fff;
    text-align: center;
    padding-bottom: 20px;
  }
  .button {
    width: 100%;
    margin-top: 25px;
  }
  .verCode {
    width: 200px;
  }
  .verButton {
    width: 112px;
    position: absolute;
    right: 0px;
    top: 46px;
    padding: 0;
    height: 36px;
    text-align: center;
    border: 0px;
  }
}
</style>
